<template>
    <div>
        <template v-for="item in pointList">
            <el-popover placement="top-start" title="设备详情" :key="item.deviceId" effect="dark" width="200"
                trigger="hover" v-show="!systemType || item.systemType === systemType">
                <!-- v-show="item.systemType == devSystem && $route.path == '/iot_device_point'" -->
                <div>设备名称：{{item.deviceName}}</div>
                <div>是否在线：{{item.isOnline?'在线' : '离线'}}</div>
                <div class="tag">
                    操作：
                    <el-tag size="mini" type="danger" @click="del(item)">删除</el-tag>
                    <el-tag size="mini" type="success" @click="">其他操作</el-tag>
                    <!-- <el-tag v-show="$route.path == '/iot_card' && !item.isOpen" size="mini" type="success" @click="openDoor(item)">开门</el-tag>
                    <el-tag v-show="$route.path == '/iot_card' && item.isOpen" size="mini" type="info" @click="closeDoor(item)">关门</el-tag> -->
                </div>
                    <!-- 'camera_offline' :devSystem==1&&!item.isOnline     &&item.isOnline-->
                <span slot="reference" :class="{
                    'pointImg':true,
                    'door_online': true,
                }"
                    :style="'position:absolute;left:'+(item.x)+'px;top:'+(item.y)+'px;'"></span>
            </el-popover>
        </template>
    </div>
</template>

<script>
import { delPoint,handleAkxDoor } from '../../url/api';
export default {
    props: ['pointList', 'systemType','imgW','imgH'],
    methods: {
        del(obj) {
            this.$confirm(
                `此操作将删除该设备点位 (${obj.deviceName}), 是否继续?`,
                '提示',
                {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning',
                }
            )
                .then(() => {
                    console.log('删除的dom', obj);
                    delPoint({
                      deviceBindPointDTOS: [obj],
                    }).then((res) => {
                        if (res.data.ok) {
                            this.$message({
                                type: 'success',
                                message: '删除成功!',
                            });
                            this.$emit('getPointList', true);
                            this.filterDeviceType();
                        }
                    });
                })
                .catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除',
                    });
                });
        },
        openDoor(obj) {

            let params = {
                doorId: obj.deviceId,
                how: 'open',
                xqId:this.pointList[0].xqId
            };
            this.$confirm('确认开门吗？')
                .then((_) => {
                    handleAkxDoor(params).then((res) => {
                        if (res.data.ok) {
                            this.$message({
                                message: '远程开门成功',
                                type: 'success',
                            });
                            this.$emit('getListFlag',true)
                        } else {
                            this.$message(res.data.msg);
                        }
                    });
                })
                .catch((_) => {});
        },

        closeDoor(obj) {
            let params = {
                doorId: obj.deviceId,
                how: 'close',
                xqId:this.pointList[0].xqId
            };
            this.$confirm('确认关门吗？')
                .then((_) => {
                    handleAkxDoor(params).then((res) => {
                        console.log(res);
                        if (res.data.ok) {
                            this.$message({
                                message: '远程开门成功',
                                type: 'success',
                            });
                            this.$emit('getListFlag',true)
                        } else {
                            this.$message(res.data.msg);
                        }
                    });
                })
                .catch((_) => {});
        },
        // 通过类型返回系统
        getSystemName(type) {
            if (type == 1) {
                return '监控';
            } else if (type == 2) {
                return '门禁';
            } else if (type == 3) {
                return '停车场';
            } else if (type == 4 || type == 5) {
                return '安防报警-公区';
            } else if (type == 6) {
                return '火灾报警';
            }
        },
    },
};
</script>

<style scoped lang='scss'>
.tag /deep/ span{
    margin: 0 5px;
    cursor: pointer;
}
.pointImg {
    $pw: 32px;
    border: 0;
    display: inline-block;
    width: $pw;
    height: $pw;
    cursor: pointer;
}
.operate {
    display: inline-block;
    width: 70%;
}
.door_online {
    // background: url('../assets/images/door_close_on.svg') no-repeat;
    // background: url('../../assets/images/bind_icon/door_close_on.svg') no-repeat;
    background: url('../../assets/images/bind_icon/online.svg') no-repeat;
    
}
.door_offline{
    background: url('../../assets/images/bind_icon/door_close_off.svg') no-repeat;
}
.door_online1 {
    background: url('../../assets/images/bind_icon/door_open_on.svg') no-repeat;
}
.door_offline1{
    background: url('../../assets/images/bind_icon/door_open_off.svg') no-repeat;
}
.camera_online {
    background: url('../../assets/images/bind_icon/camera1.svg') no-repeat;
}
.camera_offline {
    background: url('../../assets/images/bind_icon/camera0.svg') no-repeat;
}
.parking_online{
    background: url('../../assets/images/bind_icon/parking1.svg') no-repeat;
}
.parking_offline{
    background: url('../../assets/images/bind_icon/parking0.svg') no-repeat;
}
.parking_warning{
    background: url('../../assets/images/bind_icon/parking2.svg') no-repeat;
}
.alarm_normal{
    background: url('../../assets/images/bind_icon/alarm1.svg') no-repeat;
}
.alarm_warning{
    background: url('../../assets/images/bind_icon/alarm2.svg') no-repeat;
}
</style>
